<template>
  <div
    class="LeftSidebarBox"
    :class="{
      dark: theme.state.themeState == 'drak',
      light: theme.state.themeState == 'light',
    }"
  >
    <div v-if="dataMenu.title" class="title">{{ dataMenu.title }}</div>

    <div v-for="item in dataMenu.menu" :key="item.id" class="liMenu">
      <router-link :to="{ path: item.link }" exact>
        <i class="iconfont" :class="item.icon"></i>
        <span>{{ item.text }}</span>
      </router-link>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { useStore } from "vuex";
@Options({
  props: {
    dataMenu: Object,
  },
})
export default class LeftSidebar extends Vue {
  theme: any = useStore();
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url("../../assets/less/global.less");
@import url("./index.less");
</style>
